<template>
	<view class="search">
    <div style="flex-shrink: 0">
      <div class="nav search-nav-bar">
        <div class="left"  @click="back">
            <span role="img" class="anticon">
              <u-icon name="arrow-leftward" color="#5468FF" size="42"></u-icon>
            </span>
        </div>
        <div class="right">
          <div class="search-game-btn" @click="categoryShow = true">
            <u-image width="56rpx" height="56rpx" :src="currentItem.image"></u-image>
            <div style="display: flex; align-items: center;">
              <img src="/static/arrow-down.png" alt="" style="width: 24rpx;margin-right: 20rpx;">
              <div style="background-color: rgb(119, 142, 162); width: 2rpx; height: 40rpx;"></div>
            </div>
          </div>
          <u-input v-model="searchCondition.content" placeholder="输入关键词，用空格隔开" placeholder-style="color: #c8c9cc;padding-left:12rpx;padding-top:12rpx"/>
          <span role="img" class="anticon" style="padding-top: 6rpx" @click="onSearch">
            <u-icon name="search" color="#5468FF" size="42"></u-icon>
          </span>
        </div>
      </div>
      <div class="goods-filter" v-if="isSearch">
        <div class="goods-filter-dropdown">
          <u-dropdown ref="uDropdown">
            <u-dropdown-item title="默认排序" v-model="defaultSort" :options="options1" >
            </u-dropdown-item>
          </u-dropdown>
        </div>
        <div class="goods-filter-title" @click.stop="openFilter">
          筛选
        </div>
      </div>
    </div>
		<div class="empty" v-if="list.length === 0">
      <img src="/static/empty.png" alt="">
    </div>
    <div class="px-30" v-if="list.length">
      <div class="list">
        <div class="list-item" v-for="item in list" :key="item.id" @click="toDetail(item)">
          <u-image :src="item.image" mode="widthFix"></u-image>
          <div class="text-wrapper">
            <div class="text-top">
              <div>{{ item.title }}</div>
              <div class="price">￥{{ item.price }}</div>
            </div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
        <u-loadmore :status="status" />
      </div>
    </div>

<!--    菜单-->
    <u-popup v-model="categoryShow" mode="bottom" border-radius="28">
      <div class="categoryShow">
        <div class="nav">
          <div class="left" @click="categoryShow = false">
            <span role="img" class="anticon">
              <u-icon name="arrow-leftward" color="#5468FF" size="42"></u-icon>
            </span>
          </div>
          <div class="content">更多游戏</div>
          <div class="right"></div>
        </div>
        <div style="min-height: 580rpx">
          <div class="name">游戏</div>
          <div class="game-container">
            <div class="content-item" v-for="item in menuList" :key="item.id" @click="changeCategory(item)">
              <u-image :src="item.image" width="88rpx" height="88rpx" />
              <div :class="['title', currentItem.id === item.id ? 'selected' : 'normal']">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </u-popup>
    <u-popup v-model="filterShow" mode="right" border-radius="28" length="85%">
      <div class="other-show">
        <div class="other-content">
          <div class="o-box">
            <div class="o-title">大区</div>
            <div class="tab-button">
              <div
                  v-for="item in areaList"
                  @click="changeArea(item)"
                  :class="['tab-button-item',searchCondition.area_id === item.id ? 'active' : '']">
                <div class="label">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="o-box" v-if="serveList.length > 1">
            <div class="o-title">区服</div>
            <div class="tab-button">
              <div
                  v-for="item in serveList"
                  @click="changeServe(item)"
                  :class="['tab-button-item', searchCondition.server_id === item.id ? 'active' : '']">
                <div class="label">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="o-box">
            <div class="o-title">价格区间</div>
            <div class="input-box">
              <div class="input1">
                <u-input
                    placeholder="最低价"
                    input-align="center" :height="80" v-model="searchCondition.price1" @input=" searchCondition.price3 = ''"></u-input>
              </div>
              <div class="gap" style="color:rgb(196, 201, 207)">-</div>
              <div class="input1">
                <u-input
                    placeholder="最高价"
                    input-align="center" :height="80" v-model="searchCondition.price2" @input=" searchCondition.price3 = ''"></u-input>
              </div>
            </div>
            <div class="tab-button">
              <div
                  v-for="item in priceList"
                  @click="searchCondition.price3 = item.id ; searchCondition.price1 = ''; searchCondition.price2 = '';"
                  :class="['tab-button-item', searchCondition.price3 === item.id ? 'active' : '']">
                <div class="label">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div v-for="item in conditionList" class="o-box" >
            <div class="o-header">
              <div class="o-title">
                {{ item.field_name }}
              </div>
              <div class="o-more" v-if="item.option.length > 9" @click="changeFold(item)">
                {{ item.fold ? '更多' : '收起' }}
                <u-icon :name="item.fold ? 'arrow-down' : 'arrow-up'" color="#5468ff"></u-icon>
              </div>
            </div>
            <div class="tab-button" v-if="item.field_type === 'radio' || item.field_type === 'checkbox' ">
              <div
                  v-for="subItem in item.optionShow"
                  @click="clickCondition(item, subItem)"
                  :class="['tab-button-item', getConditionActiveClass(item, subItem)]">
                <div class="label">{{ subItem.label }}</div>
              </div>
            </div>
            <div class="input-box"  v-if="item.field_type === 'number'">
              <div class="input1">
                <u-input
                    placeholder="最小值"
                    input-align="center" :height="80" v-model="searchCondition[item.field_key + '_start']"></u-input>
              </div>
              <div class="gap" style="color:rgb(196, 201, 207)">-</div>
              <div class="input1">
                <u-input
                    placeholder="最大值"
                    input-align="center" :height="80" v-model="searchCondition[item.field_key + '_end']"></u-input>
              </div>
            </div>
          </div>
        </div>
        <div class="other-footer">
          <div class="o-button o-button1" @click="onReset">
            重置
          </div>
          <div style="width: 30rpx"></div>
          <div class="o-button o-button2" @click="onSearch">
            确定
          </div>
        </div>
      </div>
    </u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        isSearch: false,
        searchValue: '',
        defaultSort: '',
        options1: [
          {
            label: '默认排序',
            value: 1,
          },
          {
            label: '最新发布',
            value: 2,
          },
          {
            label: '价格最低',
            value: 3,
          },
          {
            label: '价格最高',
            value: 4,
          }
        ],
        filterShow: false,
        categoryShow: false,
        currentItem: {},
        menuList: [
        ],
        status: 'nomore',
        list: [
        ],
        num: 15,
        total: 0,
        page: 1,
        searchCondition: {
          content: '',
          area_id: 'all',
          server_id: 'all',
          price1: '',
          price2: '',
          price3: '',
        },
        conditionMap: {},
        defaultCondition: {
          area_id: 'all',
          server_id: 'all',
          price1: '',
          price2: '',
          price3: '',
        },
        priceList: [
          {
            // 500以下
            id: '<500',
            name: '500以下'
          },
          {
            // 500-1000
            id: '500-1000',
            name: '500-1000'
          },
          {
            // 1000-2000
            id: '1000-3000',
            name: '1000-3000'
          },
          {
            // 2000-5000
            id: '3000-10000',
            name: '3000-10000'
          },
          {
            // 2000-5000
            id: '10000-30000',
            name: '10000-30000'
          },
          {
            // 5000以上
            id: '>30000',
            name: '30000以上'
          }
        ],
        sortList: [
          {
            text: '默认排序',
            fontSize: 32,
            key: '',
            order: ''
          },
          {
            text: '最新发布',
            fontSize: 32,
            key: 'create_time',
            order: 'desc'
          },
          {
            text: '价格最低',
            fontSize: 32,
            orderBy: 'price',
            order: 'asc'
          },
          {
            text: '价格最高',
            fontSize: 32,
            key: 'price',
            order: 'desc'
          }
        ],
        areaList: [],
        serveList: [],
        conditionList: []
			}
		},
    onShow() {
      this.$api.getMenuList().then(res => {
        this.menuList = res
        if (res.length) {
          this.changeCategory(res[0])
        }
      })
    },
		methods: {
      changeCategory(item) {
        this.currentItem = item
        this.categoryShow = false
        this.searchCondition = {
          ...this.defaultCondition
        }
        this.getAreaList()
        this.getConditionList()
        if (this.isSearch) {
          this.list = []
          this.page = 1
          this.getGoods()
        }
      },
      getConditionList() {
        this.$api.getConditionList({
          category_id: this.currentItem.id
        }).then(conditionRes => {
          let conditionMap = {}
          this.conditionList = conditionRes.map(el => {

            if (el.field_type === 'checkbox') {
              conditionMap[el.field_key] = []
            } else if (el.field_type === 'radio'){
              conditionMap[el.field_key] = ''
            } else if (el.field_type === 'number') {
              conditionMap[el.field_key + '_start'] = ''
              conditionMap[el.field_key + '_end'] = ''
            } else if (el.field_type === 'image') {
              conditionMap[el.field_key] = []
            }
            return {
              ...el,
              fold: true,
              option: JSON.parse(el.option),
              optionShow: JSON.parse(el.option).slice(0,9)
            }
          })
          this.conditionMap = conditionMap
          this.searchCondition = {
            ...this.searchCondition,
            ...conditionMap
          }
        })
      },
      changeFold(item) {
        item.fold = !item.fold
        item.optionShow = item.fold ? item.option.slice(0,9) : item.option
      },
      clickCondition(item, subItem) {
        console.log('----', this.searchCondition, item)
        if (item.field_type === 'radio') {
          this.searchCondition[item.field_key] = subItem.value
        }
        if (item.field_type === 'checkbox' || item.field_type === 'image') {
          if (this.searchCondition[item.field_key].includes(subItem.value)) {
            this.searchCondition[item.field_key] = this.searchCondition[item.field_key].filter(v => v !== subItem.value)
          } else {
            this.searchCondition[item.field_key].push(subItem.value)
          }
        }
      },
      getConditionActiveClass(item, subItem) {
        if (item.field_type === 'radio') {
          return this.searchCondition[item.field_key] === subItem.value ? 'active' : ''
        }
        if (item.field_type === 'checkbox' || item.field_type === 'image') {
          return this.searchCondition[item.field_key].includes(subItem.value) ? 'active' : ''
        }
      },
      getAreaList() {
        this.$api.getAreaList({
          category_id: this.currentItem.id
        }).then(res => {
          this.areaList = [{ name: '全部', id: 'all', serveList: [] }].concat(res)
          console.log(this.areaList )
        })
      },
      changeArea(item) {
        this.searchCondition.server_id = 'all'
        this.searchCondition.area_id = item.id
        if (item.id === 'all') {
          // 每个大区下的服务器
          let serveList = []
          this.areaList.forEach(v => {
            serveList = serveList.concat(v.serveList)
          })
          this.serveList = [{ name: '全部', id: 'all', serveList: []}].concat(serveList)
        } else {
          this.serveList = [{ name: '全部', id: 'all', serveList: []}].concat(item.serveList)
        }
      },
      changeServe(item) {
        this.searchCondition.server_id = item.id
      },
      onSearch() {
        this.list = []
        this.page = 1
        this.getGoods()
        this.filterShow = false
        this.serverShow = false
      },
      onReset() {
        this.searchCondition = {
          ...this.defaultCondition,
          ...this.conditionMap
        }
        this.onSearch()
      },
      getGoods() {
        this.$api.getGoodsList({
          pageNum: this.page,
          pageSize: this.num,
          category_id: this.currentItem.id,
          condition: JSON.stringify(this.searchCondition)
        }).then(res => {
          this.total = res.count
          this.list = this.list.concat(res.rows.map(el => {
            el.image = el.image.split(',')[0]
            el.title = el.area ? el.area.name : '' + el.server ? el.server.name : ''
            return el
          }))
          this.status = 'loadmore'
          if (this.total <= this.list.length) {
            this.status = 'nomore'
          }
          this.isSearch = true
        })
      },
      toSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      toDetail(item) {
        uni.navigateTo({
          url: `/pages/detail/detail?id=${item.id}`
        })
      },
      openFilter() {
        this.filterShow = true
      },
      back() {
        // 跳转index
        uni.navigateTo({
          url: '/pages/index/index'
        })
      }
		}
	}
</script>

<style lang="scss">
.other-show {
  padding-top: 40rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .other-content {
    flex-grow: 1;
    overflow: auto;
    .o-box {
      padding: 30rpx;
      margin: 30rpx 0;
      .o-title {
        font-size: 28rpx;
        line-height: 44rpx;
        margin: 0;
        font-weight: 700;
      }
      .o-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .o-more {
          padding-left: 1rem;
          color: #5468ff;
          font-style: normal;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          font-weight: bold;
        }
      }
      .tab-button {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15rpx;
        .tab-button-item {
          width: 33%;
          box-sizing: border-box;
          padding: 20rpx 15rpx 0;
          height: 94rpx;
          text-align: center;
          .label {
            background: #F3F5F9;
            margin-left: 0;
            height: 64rpx;
            font-size: 24rpx;
            color: #344356;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 16rpx;
            line-height: 26rpx;
            text-align: center;
            border: 1px solid #f3f5f9;
          }
          &.active .label {
            background: rgba(84, 104, 255, .1);
            border-color: #5468ff
          }
        }
      }
      .input-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30rpx;
        .input1 {
          margin: 0;
          width: 260rpx;
          height: 80rpx;
          border-style: solid;
          border-width: 2rpx;
          border-color: #c4c9cf;
          border-radius: 16rpx;
          padding: 0 30rpx;
        }
      }
    }
  }
  .other-footer {
    height: 156rpx;
    padding: 30rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .o-button {
      line-height: 96rpx;
      height: 96rpx;
      border-radius: 30rpx;
      flex: 1;
      text-align: center;
      font-size: 32rpx;
    }
    .o-button1 {
      background-color: rgba(84, 104, 255, 0.1);
      color: rgb(84, 104, 255);
    }
    .o-button2 {
      background-color: rgb(84, 104, 255);
      color: white;
    }
  }
}
.px-30 {
  padding: 0 60rpx;
  .list {
    font-size: 28rpx;
    .list-item {
      background-color: white;
      border-radius: 30rpx;
      margin-top: 30rpx;
      overflow: hidden;
      .text-wrapper {
        padding: 20rpx 30rpx;
        .text-top {
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          .price {
            color: rgb(255, 70, 70);
          }
        }
        .desc {
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 10;
          color: rgb(51, 51, 51);
        }
      }
    }
  }
  .title {
    color: #3b4c60;
    font-size: 28rpx;
  }
  .sort-condition {
    height: 88rpx;
    background-color: #fff;
    border-radius: 30rpx;
    overflow: hidden;
    display: flex;
    z-index: 100;
    .flex1 {
      flex: 1;
      display: flex; padding: 0 30rpx; justify-content: space-between; align-items: center;
    }
    .div-line {
      width: 2rpx;
      height: 100%;
      background-color: #f3f5f9;
    }
  }
  .game-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30rpx;
    .content-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      margin-top: 30rpx;
      .title {
        text-align: center;
        font-size: 24rpx;
        margin-top: 18rpx;
      }
      .selected {
        font-weight: 700;
        color: #344356;
      }
    }
  }
  .search-container {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    border-radius: 30rpx;
    background-color: #fff;
    .search-body {
      font-size: 28rpx;
      color: #c4c9cf;
      margin-left: 30rpx;
    }

    .search-home {
      font-size: 40rpx;
      color: #5468FF;
      padding-right: 30rpx;
      display: flex;
      align-items: center;
    }
    .anticon {
      display: inline-block;
      color: inherit;
      font-style: normal;
      line-height: 0;
      text-align: center;
      text-transform: none;
      vertical-align: -.125em;
      text-rendering: optimizelegibility;
      -webkit-font-smoothing: antialiased;
      svg {
        display: inline-block;
      }
    }
  }
}
.search {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .px-30 {
    flex-grow: 1;
    overflow: auto;
  }
}
.search-nav-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #f3f5f9
}
.game-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
  .content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    margin-top: 30rpx;
    .title {
      text-align: center;
      font-size: 24rpx;
      margin-top: 18rpx;
    }
    .selected {
      font-weight: 700;
      color: #344356;
    }
  }
}

.goods-filter {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f5f9;
  position: relative;
  .goods-filter-dropdown {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .goods-filter-title{
    position: absolute;
    z-index: 999;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 60rpx;
    padding: 6rpx 16rpx;
    font-size: 24rpx;
    font-weight: 700;
    color: #344356;
    background-color: #fafafa;
    border-radius: 17rpx;
  }
}
.categoryShow {
  .nav {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 0 30rpx 0 40rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .name {
    padding: 30rpx 30rpx 0 40rpx;
    color: #344356;
    font-weight: bold;
    font-size: 36rpx;
  }
}
.nav {
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx 60rpx 0 40rpx;
  height: 128rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    width: 80rpx;
    font-size: 40rpx;
    color: #5468ff;
  }
  .content {
    flex: 6;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    color: #344356;
    font-weight: 700;
    font-size: 40rpx;
  }
  .right {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0;
    border-radius: 16rpx;
    background-color: #ffffff;
    overflow: hidden;
    padding: 0 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    .search-game-btn {
      display: flex;
      justify-content: space-around;
      justify-items: center;
      align-items: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #778ea2;
      width: 120rpx;
    }
  }
}
.empty {
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 200px);
  img {
    margin-top: 200rpx;
    width: 320rpx;
    height: 320rpx;
  }
}
</style>
